<template style="background-color: #F3F3F3;">
	<view class="content">
		<view class="noClass" v-show="noAlbum">
			<image class="imge" src="../../static/images/none-album.png"></image>
			<view class="add">
				暂无相册，快去
				<text class="addAlbum" @click="toggleMessage">添加吧~</text>
			</view>
		</view>
		<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;" v-show="image">
			<view class="uni-center albumList" v-for="(item,index) in albumData" :key="index">
				<image v-if="albumData.length!=0" class="image" :style="{'opacity':item.opacity}"  mode="aspectFill" :src="defAlbum[index]" @click="choseImg(index)" />
				<view style="font-weight: bold;">{{item.album_name}}</view>
				<view class="check" v-show="item.check">
					<i class="iconfont iconqueding"></i>
				</view>
				<view class="uni-flex uni-row tab" v-show="tabBar">
					<view class="flex-item" @click="editAlbum(item)">
						<view style="margin: 20rpx;">
							<i class="iconfont iconbianji2" style="font-size: 60rpx;"></i>
							<view>编辑</view>
						</view>
					</view>
					<view class="flex-item" @click="shareAlbum">
						<view style="margin: 20rpx;">
							<i class="iconfont iconfenxiang1" style="font-size: 60rpx;"></i>
							<view>分享</view>
						</view>
					</view>
					<view class="flex-item" @click="delAlbum">
						<view style="margin: 20rpx;">
							<i class="iconfont iconlajitong1" style="font-size: 60rpx;"></i>
							<view>删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog" @change="change">
			<uni-popup-dialog mode="input" title="新增相册" v-model="albumName" placeholder="请输入相册名"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup id="popupEdit" ref="popupEdit" type="dialog" @change="change">
			<uni-popup-dialog mode="input" title="编辑相册" v-model="albumName" placeholder="请输入相册名" @confirm="editMessage"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
			uniPopupMessage,
			uniPopupShare
		},
		data() {
			return {
				check: false,
				tabBar: false,
				noAlbum: true,
				albumName: null,
				image: true,
				photoData: null,
				photoDescribe: false,
				albumItem: null,
				inputPhotoDescribe: null,
				photoDataArr: [],
				delNum: [], //要删除的相册下标
				albumData: [], //相册列表
				defAlbum: [], //相册默认招照片
				index: 0, //选中的下标
				page: 1,
				pagesize: 8,
				lastpage: 0, //相册一共几页
				form_id: '', //用户ID
				userInfo:null,	//登录信息
				personInfo:null,	//主页信息
			};
		},
		onLoad(e) {
			console.log(e);
			this.personInfo = JSON.parse(e.personInfo)
			console.log('personInfo',this.personInfo);
			this.form_id = e.userId;
			if (this.form_id != uni.getStorageSync('userInfo').id) {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					width: '0',
					text: ''
				});
				webView.setTitleNViewButtonStyle(1, {
					width: '0',
					text: ''
				});
				// #endif
			}
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			this.albumData = []
			this.albumList()
		},
		onReady() {
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新')
			this.albumData = []
			this.albumList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page++
			if (this.page <= this.lastpage) {
				this.albumList()
			} else if (this.page > this.lastpage) {
				uni.showToast({
					icon: 'none',
					title: '没有更多了',
					duration: 2000
				})
			}
		},
		onNavigationBarButtonTap(item) {
			this.albumName = null
			console.log('右上角按钮', item.index)
			if (item.index == 0) {
				this.tabBar = false
				for (var i = 0; i < this.albumData.length; i++) {
					this.albumData[i].check = false
				}
				this.toggleMessage()
			} else if (item.index == 1 && this.albumData.length != 0 && this.tabBar == false) {
				this.tabBar = true
				this.delNum = []
				for (var i = 0; i < this.albumData.length; i++) {
					this.albumData[i].check = false
				}
			} else if (item.index == 1 && this.albumData.length != 0 && this.tabBar == true) {
				this.tabBar = false
				this.delNum = []
				for (var i = 0; i < this.albumData.length; i++) {
					this.albumData[i].check = false
				}
			}
			for (var i = 0; i < this.albumData.length; i++) {
				this.albumData[i].opacity = 1
			}
		},
		methods: {
			choseImg(index) {
				this.index = index
				console.log(index)
				if (this.tabBar == true) {
					if (this.albumData[index].check == false && this.albumData[index].opacity == 1) {
						this.albumData[index].check = true
						this.albumData[index].opacity = 0.4
						this.delNum.push(index)
					} else {
						this.albumData[index].check = false
						this.albumData[index].opacity = 1
						if (this.delNum.length != 0) {
							for (var i = 0; i < this.delNum.length; i++) {
								if (this.delNum[i] == index) {
									this.delNum.splice(i, 1)
								}
							}
						}
					}
				} else {
					this.albumData[index].check = false
					this.albumData[index].opacity = 1
					/* uni.setStorageSync('albumIndex',index)
					uni.setStorageSync('albumData',JSON.stringify(this.albumData)) */
					uni.navigateTo({
						url: "/pages/album/album-des?userID=" + this.form_id + "&albumIndex=" + index +
							"&albumData=" + JSON.stringify(this.albumData)+'&personInfo='+JSON.stringify(this.personInfo),
					});
				}
				console.log('选中的相册下标', this.delNum)
			},
			/**
			 * 打开消息提示
			 * @param {Object} type
			 */
			toggleMessage() {
				if(this.userInfo.id == this.form_id){
					this.$refs.popupDialog.open()
				}
				console.log(this.userInfo.id);
				console.log(this.form_id);
			},
			/**
			 * 添加相册对话框点击确认按钮
			 */
			dialogConfirm(done, val) {
				console.log(val)
				if (val == null || val == '') {
					uni.showToast({
						icon: 'none',
						title: '相册名不能为空',
						duration: 2000
					});
				} else {
					let resData = {
						album_name: val,
						describe: '这是相册描述'
					}
					uni.showLoading({
						title: '正在添加',
						mask: true
					});
					console.log(resData)
					this.$api.apiPost('user/video.Photo/AlbumAdd', resData).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							uni.hideLoading()
							console.log('res', res)
							uni.showToast({
								title: '添加成功',
								duration: 2000
							});
							this.albumData = []
							this.albumList()
							console.log(this.albumData)
						} else {
							uni.showToast({
								icon: 'none',
								title: '添加失败',
								duration: 2000
							});
						}
					})
					// 需要执行 done 才能关闭对话框
					done()
				}
			},
			/**
			 * 编辑相册对话框点击确认按钮
			 */
			editMessage(done, val) {
				let resData = {
					album_name: val,
					describe: '这是相册描述',
					album_id: this.albumData[this.delNum[0]].album_id
				}
				console.log(resData)
				this.$api.apiPost('user/video.Photo/Albumeidt', resData).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '编辑成功',
							duration: 2000
						});
						this.tabBar = false
						this.delNum = []
						this.albumData = []
						this.albumList()
					} else {
						uni.showToast({
							title: '编辑失败',
							duration: 2000
						});
					}
				})
				// 需要执行 done 才能关闭对话框
				done()
			},
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				console.log('点击取消');
				// 需要执行 done 才能关闭对话框
				done()
			},
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			/* 相册列表 */
			albumList() {
				console.log('登录信息', uni.getStorageSync('userInfo'))
				let resData = {
					page: this.page,
					pagesize: this.pagesize,
					form_id: this.form_id
				}
				this.$api.apiPost('user/video.Photo/listsPhoto', resData).then(res => {
					const DATA = res.data
					if (DATA.code == 200) {
						console.log('res', res)
						this.lastpage = DATA.data.last_page
						console.log('相册列表', DATA.data.data)
						for (var i = 0; i < DATA.data.data.length; i++) {
							DATA.data.data[i].opacity = 1
							DATA.data.data[i].check = false
							this.albumData.push(DATA.data.data[i])
						}
						if (this.albumData.length != 0) {
							this.noAlbum = false
						}
						/* 相册默认照片 */
						console.log('albumData', this.albumData)
						this.defAlbum = []
						for (var i = 0; i < this.albumData.length; i++) {
							if (this.albumData[i].img_list.data.length == 0) {
								this.albumData[i].img_list.data.push({
									img_url: '../../static/images/login/logo.png'
								})
							}
							this.defAlbum.push(this.albumData[i].img_list.data[0].img_url)
						}
						console.log('相册默认照片', this.defAlbum)
						console.log('noAlbum', this.noAlbum)
					}else{
						if(this.albumData.length!=0){
							this.noAlbum = false
						}else{
							this.noAlbum = true
						}
						// #ifdef APP-PLUS
						var webView = this.$mp.page.$getAppWebview();
						if(this.noAlbum == true){
							// 修改buttons
							webView.setTitleNViewButtonStyle(1, {
							width: '0',
							});
						}else{
							webView.setTitleNViewButtonStyle(1, {
							width: '56rpx',
							height: '40rpx'
							});
						}
						// #endif
					}
				})
			},
			/* 多选分享相册 */
			shareAlbum() {
				if (this.delNum.length == 1) {
					let urls = {
						type: 'image',
						pictures: [],
						extra: {
							scene: "WXSceneSession"
						}
					};
					uni.downloadFile({
						url: this.albumData[this.index].img_list.data[0].img_url, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载成功', res.tempFilePath);
								urls.pictures.push(res.tempFilePath)
								console.log('urls', urls)
								plus.share.sendWithSystem(urls, function() {
									console.log('分享成功');
									uni.showToast({
										title: '分享成功',
										duration: 2000
									});
									this.tabBar = false
								}, function(e) {
									console.log('分享失败：' + JSON.stringify(e));
									uni.showToast({
										title: '分享失败',
										duration: 2000
									});
								});
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '最少或最多选择一个',
						duration: 2000
					});
				}
			},
			/* 多选编辑相册 */
			editAlbum(item) {
				if (this.delNum.length == 1) {
					console.log('多选编辑相册')
					console.log(this.delNum[0])
					this.albumName = item.album_name
					this.$refs.popupEdit.open()
				} else {
					uni.showToast({
						icon: 'none',
						title: '最少或最多选择一个',
						duration: 2000
					});
				}
			},
			/* 多选删除相册 */
			delAlbum() {
				console.log('多选删除相册', this.delNum)
				var str = []
				if (this.delNum.length != 0) {
					for (var i = 0; i < this.delNum.length; i++) {
						console.log(this.albumData[this.delNum[i]].album_id)
						str.push(this.albumData[this.delNum[i]].album_id)
					}
					console.log('str', str.toString())
					let resData = {
						album_id: str.toString()
					}
					this.$api.apiPost('user/video.Photo/deleteAlbum', resData).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							uni.showToast({
								title: '删除成功',
								duration: 2000
							});
							this.tabBar = false
							this.albumData = []
							this.delNum = []
							this.albumList()
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择要删除的相册',
						duration: 2000
					});
				}
			},
			onPageScroll(e) {

			}
		}
	};
</script>

<style>
	.content {
		width: 100%;
	}
	
	.iconqueding{
		font-size: 40rpx;
		background-color: #318EF1;
		color: #FFFFFF;
		border-radius: 10rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.albumList{
		width: 50%;
		margin-top: 30rpx;
	}

	.noClass {
		text-align: center;
		font-size: 36rpx;
		color: #999999;
	}

	.add {
		/* width: 148px;
		height: 20px; */
		margin-top: 46rpx;
		color: #C0C4CC;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		/* margin: 23px 114px 0 114px; */
	}

	.imge {
		width: 440rpx;
		height: 304rpx;
		margin: 200rpx 154rpx 0 154rpx;
	}

	.flexp {
		border: 2rpx solid #000000;
		text-align: center;
	}

	.image {
		width: 330rpx;
		height: 330rpx;
		border-radius: 10rpx;
	}

	.image2 {
		width: 90%;
		height: 200rpx;
	}

	.flex-item {
		width: 33.3%;
		text-align: center;
	}

	.flex-item2 {
		width: 66.6%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.flex-item-V {
		border: 1upx solid #DADADA;
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.tab {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}

	.check {
		margin-top: -110rpx;
		margin-left: 290rpx;
		position: absolute;
		font-weight: bold;
		text-align: center;
		width: 20rpx;
		height: 20rpx;
	}
	
	
	.addAlbum{
		font-weight: bold;
		color: #00D5A2;
	}
</style>
